<template>
	<div class="new-upload" :style="{'width': labelWidth}">
		<div v-show="title!=''" class="upload-title" :id="isRequired?'is-required':''">
			<Small :rank="rank" :small="title" :remark="remark" :template="template"/>
		</div>
		<div class="upload-ctn">
			<el-upload
				ref="newUpload"
				action="/zuul/materialManage/file/filecommon/uploadFileNewNoFolder"
				:auto-upload="false"
				:data="data"
				:multiple="true"
				:limit="3"
				:before-remove="removeFile"
				:on-success="submitFile"
                :accept="accept" 
				:before-upload="beforeUpload"
				:on-error="uploadErr"
				:file-list="fileList">
				<el-input placeholder="选择附件"></el-input>
			</el-upload>
			<el-button class="submit-btn" size="small" type="primary" plain @click="submit">点击上传</el-button>
		</div>
	</div>
</template>

<script>
	import Small from "@/components/MyTitle/small.vue";
	import {deleteFile, getFileList} from "@/api/fileMng";
    export default {
        name: "newUpload",
		components :{
        	Small
		},
		props: {
            accept: {
                type: String,
                default: '.docx,.pdf,.jpg,.jpeg,.doc,.png'
            },
        	labelWidth: {
        		default: '360px'
			},
			rank: {
        		default: null
			},
			title: {
				type: String,
				default: ""
			},
            remark:{
                type: String,
                default: ""
            },
            template:{
                type: String,
                default: ""
            },
			id: {
        		type: String | Number,
				default: ""
			},
			type: {
				type: String | Number,
				default: ""
			},
			folder: {
        		type: String,
				default: ""
			},
			isRequired: {
        		default: false
			}
		},
		data(){
        	return {
        		fileList: [],
				filesId: []
			}
		},
		computed: {
			data(){
				return {
					busineesId: this.id,	//附件业务id
					busineesType: this.type,	//附件类型
					folder: this.folder		//附件所属目录
				}
			}
		},
		watch: {
        	id(newVal,oldVal){
				this.getFiles();
			},
			filesId(newVal,oldVal){
				this.$emit("getUploadFilesId",newVal);
			}
		},
		methods: {
            
			beforeUpload(file) {
				if(this.id == ''){
					this.$message.error("文件业务id为空");
					return false;
				}
				const {size} = file;
				if(size > 50*1024*1024) {
					this.$message.warning('请上传小于50MB的文件')
					return false;
				}
			},
        	//获取附件
			getFiles(){
				getFileList({
					...this.data
				}).then(res=>{
					if(res.data.code === '000000'){
						if(res.data.resultBody instanceof Array){
							this.fileList = res.data.resultBody.map(item=>{
								return {
									name: item.fileName,
									fileId: item.fileId
								}
							});
							this.filesId = res.data.resultBody.map(item=>{
								return item.fileId;
							})
						}
					}else{
						thi.$message.error(res.data.message);
					}
				})
			},
        	//提交附件
        	submit(){
				this.$refs["newUpload"].submit();
			},
			submitFile(res){
				if(res.code === '000000'){
					if(res.resultBody!=null){
						this.filesId.push(res.resultBody.fileId);
					}
				}else{
					this.$message.error(res.message);
					this.$refs["newUpload"].clearFiles();
					this.filesId = [];
				}
			},
			//文件上传失败
			uploadErr(){
				this.$message.error("文件上传失败");
			},
			//移出附件
			removeFile(file){
				if(file.fileId!=null){
					deleteFile(file.fileId);
					this.filesId = this.filesId.filter(item=>{
						return item!=file.fileId;
					})
				}else if(file.response!=null){
					if(file.response.code === '000000'){
						deleteFile(file.response.resultBody.fileId);
						this.filesId = this.filesId.filter(item=>{
							return item!=file.response.resultBody.fileId;
						})
					}else{
						this.$message.error(file.response.message);
					}
				}
			},
		},
		mounted() {
			this.getFiles();
		}
	}
</script>

<style scoped lang="scss">
	#is-required{
		position: relative;
		padding-left: 16px;
		&::before{
			position: absolute;
			left: 6px;
			top: 50%;
			display: block;
			line-height: 1;
			transform: translate(-50%,-50%);
			content: "*";
			color: red;
		}
	}
	.upload-ctn{
		width: 100%;
		box-sizing: border-box;
		position: relative;
	}
	.upload-title{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	.submit-btn{
		height: 40px;
		position: absolute;
		top: 0;
		right: 0;
	}
</style>
<style lang="scss">
	.upload-ctn{
		&>div{
			margin-right: 90px;
		}
		.el-upload{
			display: block;
		}
	}
</style>
